<template>
  <div>
    <el-divider content-position="left">统计销售量前10的书籍</el-divider>
    <span style="color: grey">选择日期:</span>
    <el-date-picker
      v-model="dataRange"
      type="monthrange"
      align="right"
      :clearable="false"
      unlink-panels
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      :picker-options="pickerOptions"
      value-format="yyyy-MM"
      @change="changeDate1"
    >
    </el-date-picker>
    <!-- 热销榜单统计图开始 -->
    <TopTen  :bookName="bookName" :totalAmount="totalAmount" />
    <!-- 热销榜单统计图结束 -->

    <!--  -->
    <!--  -->
    <!--  -->
    <br /><br /><br /><br /><br /><br />
    <el-divider content-position="left">统计销售额</el-divider>
    <span style="color: grey" @change="changeDate2">选择年份:</span>
    <el-date-picker
      v-model="yearC"
      type="year"
      value-format="yyyy"
      :clearable="false"
      @change="changeDate2"
    >
    </el-date-picker>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <span style="color: grey">选择统计方式:</span>
    <el-select v-model="flag" @change="changeDate2">
      <el-option label="按月份统计" value="0"> </el-option>
      <el-option label="按季度统计" value="1"> </el-option>
    </el-select>
    <!-- 销售额统计图开始 -->
    <SalesAmount :salesTime="salesTime" :totalPrice="totalPrice"/>
    <!-- 销售额统计图结束 -->
  </div>
</template>
<script>
import {
  getPriceByMonth,
  getPriceByQuarter,
  getAmountSameDate,
  getAmountNoSameDate,
} from "../api/dataMG";
import SalesAmount from "./echarts/SalesAmount.vue";
import TopTen from "./echarts/TopTen.vue";

export default {
  name: "DataStatistics",
  components: {
    SalesAmount,
    TopTen,
  },
  data() {
    // 获取当前日期
    const now = new Date();
    // 设置年份和月份（注意：JavaScript的月份是从0开始的，所以我们需要+1）
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, "0"); // 保证月份是两位数
    return {
      bookName: [],
      totalAmount: [],
      salesTime:[],
      totalPrice:[],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dataRange: [year + "-" + month, year + "-" + month],

      yearC: year + "", //跟下面的是一组的，默认是当年
      flag: "0", //0表示按照月份来统计，1表示按照季度来统计，默认为0
    };
  },
  methods: {
    async changeDate2() {
      this.salesTime = [],
      this.totalPrice = []
      if (this.flag == "0") {
        // 按月份统计按月份统计按月份统计
        await getPriceByMonth(this.yearC).then((res) => {
          if (res.data.code == 200) {
            res.data.data.forEach(item=>{
              this.salesTime.push(item.showTime)
              this.totalPrice.push(item.totalPrice)
            })
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        // 按季度统计按季度统计按季度统计
        await getPriceByQuarter(this.yearC).then((res) => {
          if (res.data.code == 200) {
            res.data.data.forEach(item=>{
              this.salesTime.push(item.showTime)
              this.totalPrice.push(item.totalPrice)
            })
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    async changeDate1() {
      this.bookName = [];
      this.totalAmount = [];
      //改变统计榜单前10的日期触发事件
      if (this.dataRange[0] == this.dataRange[1]) {
        //两个年月日期相等，说明是统计那一个月的销售额，
        let year = this.dataRange[0].split("-")[0];
        let month = this.dataRange[0].split("-")[1];
        // console.log(year,month)
        await getAmountSameDate(year, month).then((res) => {
          if (res.data.code == 200) {
            res.data.data.forEach(item=>{
              this.bookName.push(item.bookName);
              this.totalAmount.push(item.totalAmount)
            })
            // console.log(this.bookName,this.totalAmount)
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        //两个年月日期不相等，说明是统计那个范围的销售额，
        let startYear = this.dataRange[0].split("-")[0];
        let startMonth = this.dataRange[0].split("-")[1];
        let endYear = this.dataRange[1].split("-")[0];
        let endMonth = this.dataRange[1].split("-")[1];
        await getAmountNoSameDate(
          startYear,
          startMonth,
          endYear,
          endMonth
        ).then((res) => {
          if (res.data.code == 200) {
            res.data.data.forEach((item) => {
              // console.log(item)
              this.bookName.push(item.bookName);
              this.totalAmount.push(item.totalAmount);
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
  },
  mounted() {
    this.changeDate1();
    this.changeDate2();
  },
};
</script>
<style lang="scss" scoped>
</style>